diff options
Diffstat (limited to 'app/[lng]/page.tsx')
| -rw-r--r-- | app/[lng]/page.tsx | 181 |
1 files changed, 107 insertions, 74 deletions
diff --git a/app/[lng]/page.tsx b/app/[lng]/page.tsx index 2ee83857..d0018f40 100644 --- a/app/[lng]/page.tsx +++ b/app/[lng]/page.tsx @@ -3,112 +3,119 @@ import Link from 'next/link'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; -import { ShoppingCart, Users, Settings, ArrowRight, Building2 } from 'lucide-react'; +import { Briefcase, Package, Settings, ArrowRight, CheckCircle, Monitor, Shield, BarChart3, Building2 } from 'lucide-react'; export default function LandingPage() { const portals = [ { id: 'sales', - title: '기술영업포탈', + title: '기술 영업 포털', description: '기술 영업 단계에서의 RFQ를 관리할 수 있는 통합 플랫폼', - icon: Users, - color: 'from-emerald-500 to-teal-500', + icon: Briefcase, + color: 'from-green-500 to-emerald-500', href: '/sales', - features: ['벤더 관리', '기술 영업 RFQ'] + features: ['벤더 관리', '기술 영업 RFQ'], }, { id: 'purchase', - title: '구매포탈', - description: '협력업체에서부터 마지막 발주까지 원스톱 구매 솔루션', - icon: ShoppingCart, - color: 'from-blue-500 to-cyan-500', + title: '구매 포털', + description: '협력 업체에서 부터 마지막 발주까지 원스톱 구매 솔루션', + icon: Package, + color: 'from-blue-500 to-indigo-500', href: '/procurement', - features: ['협력업체 관리', '구매관리'] + features: ['협력 업체 관리', '구매 관리'], }, - { id: 'design', - title: '설계포탈', + title: '설계 포털', description: '벤더가 플랫폼을 통해 데이터와 문서를 제출할 수 있게 하고 TBE를 처리할 수 있는 플랫폼', icon: Settings, - color: 'from-purple-500 to-pink-500', + color: 'from-purple-500 to-violet-500', href: '/engineering', - features: ['설계 기준정보관리', 'TBE'] + features: ['설계 기준정보 관리', 'TBE'], } ]; - - return ( - <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800"> + <div className="min-h-screen bg-white"> {/* Header */} <header className="relative overflow-hidden"> - <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-purple-600/10"></div> - <div className="relative container mx-auto px-4 py-16 text-center"> - <div className="flex items-center justify-center mb-6"> - <Building2 className="h-12 w-12 text-blue-600 mr-3" /> - <h1 className="text-4xl md:text-6xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"> - enterprise Vendor Co-work Platform + <div + className="absolute inset-0 bg-cover bg-center bg-no-repeat" + style={{ + backgroundImage: "url('/images/headerImg.png')" + }} + ></div> + <div className="absolute inset-0 bg-black/20"></div> + <div className="relative container mx-auto px-4 py-16 md:py-24 text-center"> + <div className="flex items-center justify-center mb-8"> + <h1 className="text-3xl md:text-5xl lg:text-6xl font-bold text-white leading-tight"> + Enterprise Vendor Co-work Platform </h1> </div> - <p className="text-xl md:text-2xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto leading-relaxed"> + <p className="text-lg md:text-xl lg:text-2xl text-white max-w-4xl mx-auto leading-relaxed mb-8"> 통합된 비즈니스 솔루션으로 구매부터 설계까지, - <br />모든 업무 프로세스를 하나의 플랫폼에서 관리하세요 + <br className="hidden md:block" /> + 모든 업무 프로세스를 하나의 플랫폼에서 관리하세요 </p> - <Badge variant="secondary" className="mt-6 px-4 py-2 text-sm"> - Enterprise Ready - </Badge> </div> </header> {/* Main Portal Selection */} - <main className="container mx-auto px-4 py-16"> - <div className="text-center mb-16"> - <h2 className="text-3xl md:text-4xl font-bold text-slate-800 dark:text-slate-100 mb-4"> + <main className="container mx-auto px-4 py-12 md:py-20"> + <div className="flex flex-col max-w-7xl mx-auto "> + <div className="flex flex-col items-left justify-center" > + <div className="text-left mb-12 md:mb-16"> + <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-slate-800 mb-4"> 포털을 선택하세요 </h2> - <p className="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto"> + <p className="text-base md:text-lg text-slate-600 max-w-2xl leading-relaxed"> 각 포털은 특화된 기능과 도구를 제공하여 업무 효율성을 극대화합니다 </p> </div> + </div> - <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto"> + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-7xl mx-auto"> {portals.map((portal) => { const Icon = portal.icon; return ( <Link key={portal.id} href={portal.href} className="block"> - <Card className="relative group cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-2xl border-0 bg-white dark:bg-slate-800 overflow-hidden h-full"> - <div className={`absolute inset-0 bg-gradient-to-br ${portal.color} opacity-5 group-hover:opacity-10 transition-opacity duration-300`}></div> + <Card className="relative group cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-xl bg-white border-slate-200 overflow-hidden h-full"> + <div className={`absolute inset-0 bg-gradient-to-br ${portal.color} opacity-0 group-hover:opacity-5 transition-opacity duration-300`}></div> - <CardHeader className="relative pb-4"> - <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${portal.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}> - <Icon className="h-8 w-8 text-white" /> + <CardHeader className="relative pb-3"> + <div className="flex items-start justify-between mb-4"> + <div className={`w-12 h-12 md:w-14 md:h-14 rounded-lg bg-gradient-to-br ${portal.color} flex items-center justify-center group-hover:scale-110 transition-transform duration-300 flex-shrink-0`}> + <Icon className="h-6 w-6 md:h-7 md:w-7 text-white" /> + </div> </div> - <CardTitle className="text-2xl font-bold text-slate-800 dark:text-slate-100 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-purple-600 group-hover:bg-clip-text transition-all duration-300"> + <CardTitle className="text-xl md:text-2xl font-bold text-slate-800 text-left group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-purple-600 group-hover:bg-clip-text transition-all duration-300 mb-2"> {portal.title} </CardTitle> - <CardDescription className="text-slate-600 dark:text-slate-400 text-base leading-relaxed"> + <CardDescription className="text-slate-600 text-sm md:text-base leading-relaxed text-left"> {portal.description} </CardDescription> </CardHeader> - <CardContent className="relative"> + <CardContent className="relative pt-0"> <div className="mb-6"> - <h4 className="font-semibold text-slate-700 dark:text-slate-300 mb-3">주요 기능</h4> + <h4 className="font-semibold text-slate-700 mb-3 text-sm md:text-base text-left">주요 기능</h4> <div className="space-y-2"> {portal.features.map((feature, idx) => ( - <div key={idx} className="flex items-center text-sm text-slate-600 dark:text-slate-400"> - <div className={`w-2 h-2 rounded-full bg-gradient-to-r ${portal.color} mr-3`}></div> - {feature} + <div key={idx} className="flex items-center text-sm text-slate-600"> + <div className={`w-1.5 h-1.5 md:w-2 md:h-2 rounded-full bg-gradient-to-r ${portal.color} mr-3 flex-shrink-0`}></div> + <span className="text-xs md:text-sm text-left">{feature}</span> </div> ))} </div> </div> - <Button className={`w-full bg-gradient-to-r ${portal.color} hover:opacity-90 text-white border-0 group-hover:shadow-lg transition-all duration-300`}> - 포털 접속하기 - <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-300" /> - </Button> + <div className="flex justify-end"> + <Button className={`bg-gradient-to-r ${portal.color} hover:opacity-90 text-white border-0 group-hover:shadow-lg transition-all duration-300 text-sm px-6 py-2`}> + 접속하기 + <ArrowRight className="ml-2 h-3 w-3 md:h-4 md:w-4 group-hover:translate-x-1 transition-transform duration-300" /> + </Button> + </div> </CardContent> </Card> </Link> @@ -117,42 +124,68 @@ export default function LandingPage() { </div> {/* Additional Info Section */} - <div className="mt-20 text-center"> - <div className="bg-white dark:bg-slate-800 rounded-3xl p-8 md:p-12 shadow-xl border border-slate-200 dark:border-slate-700 max-w-4xl mx-auto"> - <h3 className="text-2xl md:text-3xl font-bold text-slate-800 dark:text-slate-100 mb-4"> - 모든 포털이 연동됩니다 - </h3> - <p className="text-lg text-slate-600 dark:text-slate-400 mb-8"> - 구매, 영업, 설계 포털 간의 데이터가 실시간으로 동기화되어 - 효율적인 업무 협업이 가능합니다 - </p> - <div className="flex flex-wrap justify-center gap-4"> - <Badge variant="outline" className="px-4 py-2">실시간 동기화</Badge> - <Badge variant="outline" className="px-4 py-2">통합 대시보드</Badge> - <Badge variant="outline" className="px-4 py-2">권한 관리</Badge> - <Badge variant="outline" className="px-4 py-2">보안 인증</Badge> + <div className="mt-16 md:mt-20 flex flex-col md:flex-row gap-8 md:gap-12"> + {/* Left Section - Text Content */} + <div className="flex-1 text-left"> + <div className="bg-white mt-12 rounded-lg"> + <h3 className="text-xl md:text-2xl lg:text-3xl font-bold text-slate-800 mb-4"> + 모든 포털이 연동됩니다 + </h3> + <p className="text-sm md:text-base lg:text-lg text-slate-600 mb-6 md:mb-8 leading-relaxed"> + 구매, 영업, 설계 포털 간의 데이터가 + <br className="hidden md:block" /> + 실시간으로 동기화되어 효율적인 업무 협업이 가능합니다 + </p> </div> </div> + + {/* Right Section - Feature Icons */} + <div className="flex-1"> + <div className="grid grid-cols-2 gap-3 md:gap-4"> + <div className="flex flex-col items-center justify-center bg-slate-100 rounded-lg px-4 py-4 md:px-6 md:py-6"> + <CheckCircle className="h-8 w-8 md:h-12 md:w-12 text-green-500 mb-2 flex-shrink-0" /> + <span className="text-xs md:text-sm text-slate-700 text-center">실시간 동기화</span> + </div> + <div className="flex flex-col items-center justify-center bg-slate-100 rounded-lg px-4 py-4 md:px-6 md:py-6"> + <Monitor className="h-8 w-8 md:h-12 md:w-12 text-blue-500 mb-2 flex-shrink-0" /> + <span className="text-xs md:text-sm text-slate-700 text-center">통합 대시보드</span> + </div> + <div className="flex flex-col items-center justify-center bg-slate-100 rounded-lg px-4 py-4 md:px-6 md:py-6"> + <Settings className="h-8 w-8 md:h-12 md:w-12 text-purple-500 mb-2 flex-shrink-0" /> + <span className="text-xs md:text-sm text-slate-700 text-center">권한 관리</span> + </div> + <div className="flex flex-col items-center justify-center bg-slate-100 rounded-lg px-4 py-4 md:px-6 md:py-6"> + <Shield className="h-8 w-8 md:h-12 md:w-12 text-yellow-500 mb-2 flex-shrink-0" /> + <span className="text-xs md:text-sm text-slate-700 text-center">보안 인증</span> + </div> + </div> + </div> + </div> </div> </main> - + {/* Footer */} - <footer className="bg-slate-800 dark:bg-slate-900 text-white py-12 mt-20"> + <footer className="bg-slate-800 text-white py-8 md:py-12 mt-16 md:mt-20"> <div className="container mx-auto px-4 text-center"> - <div className="flex items-center justify-center mb-6"> - <Building2 className="h-8 w-8 mr-2" /> - <span className="text-xl font-semibold">enterprise Vendor Co-work Platform</span> + <div className="flex flex-col items-center justify-center mb-4 md:mb-6"> + <div className="flex items-center justify-center"> + <img + src="/images/samsung_logo.png" + alt="삼성중공업 로고" + className="h-8 w-auto md:h-10 mr-2" + /> + <span className="text-lg md:text-xl font-semibold">삼성중공업 <span className="font-normal">eVCP</span></span> + </div> + <div className="text-sm md:text-base text-slate-300 mt-2"> + Enterprise Vendor Co-work Platform + </div> </div> - <p className="text-slate-400 mb-4"> + <p className="text-slate-400 text-xs md:text-sm"> © 2025 삼성중공업. All rights reserved. </p> - {/* <div className="flex justify-center space-x-6 text-sm text-slate-400"> - <Link href="/terms" className="hover:text-white transition-colors">이용약관</Link> - <Link href="/privacy" className="hover:text-white transition-colors">개인정보처리방침</Link> - <Link href="/support" className="hover:text-white transition-colors">고객지원</Link> - </div> */} </div> </footer> </div> + ); }
\ No newline at end of file |